Step 2 - Create the application structure

In this step you use the Page node and the Pages editor to create the application structure. You also learn how to paint the background of 2D nodes using Brushes.

Create Page nodes

In this section you use the Pages window to create three Page nodes, each representing a different part of your application. Use the Page nodes to create the structure of the user interface in your application, and the Page Host nodes to manage navigation requests and transitions between Page nodes under a Page Host node. For example, you can use Page and Page Host nodes to create different parts of the user interface in your Kanzi application, such as Page Host nodes Home, Media, Navigation, or Settings screens, each having their own hierarchy of Page and Page Host nodes.

In this and the following steps of this tutorial you add content to the Page nodes you create here.

To create Page nodes:

Select the Pages window next to the Library and Dictionaries windows.

In the Pages window click

below the RootPage node to create a Page node. Create three Page child nodes in the RootPage node. As you add Page nodes in the Pages window, in the Project window Kanzi Studio shows the location of these nodes in the scene graph.
When you click a Page node in the Pages window Kanzi Studio transitions to that Page node using the Push transition. Because there is no content in the Page nodes you just created, clicking does not have any visual effect in the Preview.

To pan and zoom in the Pages window, use these controls:

Control	Description
Click and drag the middle mouse button. Press the Space key, and click and drag the left mouse button.	Pan
Scroll the mouse wheel. Press the Shift and Alt keys, and click and drag the left mouse button.	Zoom

In the Pages double-click the name of a Page node, enter a new name, and press Enter.
For example, call the three nodes Navigation, Car, and Media.
In the Project select the RootPage node and in the Properties set the Default Subpage property to the Navigation Page node.
When you activate the Page node where you set the Default Subpage property Kanzi activates the selected Page node. For example, when you set the Navigation Page node as the default subpage of the RootPage Page node, when you start the application Kanzi shows the Navigation Page node.

Set the background of the Page nodes

Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background. Kanzi has these brushes:

Color Brush to fill a 2D node with a solid color.
Texture Brush to fill a 2D node with a texture.
Material Brush to fill a 2D node with a material.

When you create a Kanzi Studio project it has a default Texture Brush called DefaultBackground and it paints the background of the RootPage node.

To set the background of the Page nodes:

In the Project select the Car Page node.
In the Properties click next to the Background Brush to add that property to the Car Page node.
Set the Background Brush property to the DefaultBackground brush.
In the Pages you can see the brush you set to the Background Brush property.
From the Properties drag the Background Brush property from the Car Page node to the Media Page node in the Project.
When you drag a property from Properties and drop it to a node in the Project, Kanzi Studio adds that property and its value to that node.

Now when you view the Car and the Media Page nodes in the Pages window, you can see that they have a background you set with the Background Brush property.

Add content to the Navigation and Car Page nodes

In this section you add content to the Navigation and Car Page nodes.

To add content to Page nodes:

From the Assets window drag the NavigationMockup.png image to the Navigation Page node in the Pages window.
Kanzi Studio automatically creates an Image node that uses the image you dragged from the Assets and adds the Image node to the Page node where you dropped the image.
TIP
In the Assets window you can search and browse the content in your project:
- In the search box enter the word contained in the name of the item you are looking for.
- Click the buttons to show only the content of a certain type.
In the Project press Alt and right-click the Car Page node and select the Viewport 2D node.
Viewport 2D is a special node because it can render both 2D objects, such as Image, Page, Button 2D, and a Scene, which is a 3D object. When you create a new Kanzi Studio project, the project has a Viewport 2D with a Scene that contains a Camera and a Directional Light.
TIP
When you press Alt and right-click a node in the Project window or a resource in the Library window, you get a direct access to the node and resource creation menu. If you only right-click a node or a resource, in the context menu select Create to access the creation menu.
In the Project drag from the Prefabs the Car Scene node to the Viewport 2D node you just created in the Car Page node.
When you drag a prefab from Prefabs Kanzi Studio creates an instance of that prefab in the scene graph in the node where you drop the prefab.

Transitioning between Page nodes

When you click a Page or a Page Host node in the Pages, in the Preview you can see the transition. However, to transition between the nodes in your application you need to use a trigger with one of the Navigate to actions.

By default Kanzi uses the Push transition when you navigate to and leave that Page node. You can customize the transition using the Transitions editor in the Pages editor.

In the next step of this tutorial you create the buttons that use the Navigate to Page triggers to move between the Page nodes.

< PREVIOUS STEP

NEXT STEP >